<template>
  <van-nav-bar title="评价详情" left-text="返回" left-arrow @click-left="goBack" />
  <!-- 订单详细 -->
  <section class="aui-scrollView">
    <!-- 订单状态 -->
    <div class="aui-pay-change">
      <div class="aui-flex">
        <div class="aui-flex-box">
          <h3>{{ info.status_text }}</h3>
        </div>
        <div class="aui-pay-zfb">
          <img src="/assets/images/icon-zfb.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 订单商品 -->
    <div class="aui-commodity-bg" style="background: transparent">
      <div
        v-for="item in info.info"
        :key="item.id"
        style="margin-bottom: 10px; background: #f5f5f5"
      >
        <div class="aui-flex">
          <div class="aui-commodity-img">
            <router-link
              :to="{ path: '/product/product/info', query: { proid: item.proid } }"
            >
              <img :src="item.product.thumbs_text" />
            </router-link>
          </div>
          <div class="aui-flex-box">
            <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
            <p>商品单价：￥{{ item.price }}</p>
            <span class="aui-barter-time">七天退换</span>
          </div>
          <div>
            <h5>￥{{ item.total }}</h5>
            <p class="aui-sml-text">X{{ item.pronum }}</p>
          </div>
        </div>
        <div class="aui-flex">
          <van-rate v-model="item.rate" readonly />
        </div>
        <van-cell-group inset>
          <van-field type="textarea" rows="2" autosize v-model="item.comment" readonly />
        </van-cell-group>
        <div class="aui-flex">
          <van-image
            v-for="(item, index) in item.proimg_text"
            :key="index"
            width="5rem"
            height="5rem"
            style="margin-right: 1rem"
            fit="cover"
            position="center"
            :src="item"
            @click="getImageData(item)"
          />
        </div>
      </div>
    </div>
  </section>
</template>
<script setup>
const { cookies } = useCookies();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const LoginUser = reactive(cookies.get("LoginUser"));
const orderid = ref(0);
const info = ref({
    address: {}
});
onBeforeMount(() => {
  orderid.value = route.query.orderid ? route.query.orderid : 0;
  getorderInfoData();
});
const goBack = () => {
  router.push("/business/order/index");
};
const getImageData = (val) =>{
    showImagePreview([val]);
}
const getorderInfoData = async () => {
  let result = await Api.orderInfo({
    busid: LoginUser.id,
    orderid: orderid.value,
  });
  if (result.code) {
    info.value = result.data;
  }
};
</script>
<style>
@import url("/assets/css/info.css");
</style>
